<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="myfocus/myfocus-2.0.4.min.js"></script><!--引入myFocus库-->
    <style>
        #boxID {
            width: 760px;
            height: 300px;
        }
    </style>
</head>
<body>
    <select id="focus_pattern">
    <option value="mF_fscreen_tb">mF_fscreen_tb</option>
    <option value="mF_YSlider">mF_YSlider</option>
    <option value="mF_luluJQ">mF_luluJQ</option>
    <option value="mF_51xflash">mF_51xflash</option>
    <option value="mF_expo2010">mF_expo2010</option>
    <option value="mF_games_tb">mF_games_tb</option>
    <option value="mF_ladyQ">mF_ladyQ</option>
    <option value="mF_liquid">mF_liquid</option>
    <option value="mF_liuzg">mF_liuzg</option>
    <option value="mF_pithy_tb">mF_pithy_tb</option>
    <option value="mF_qiyi">mF_qiyi</option>
    <option value="mF_quwan">mF_quwan</option>
    <option value="mF_rapoo">mF_rapoo</option>
    <option value="mF_sohusports">mF_sohusports</option>
    <option value="mF_taobao2010">mF_taobao2010</option>
    <option value="mF_taobaomall">mF_taobaomall</option>
    <option value="mF_tbhuabao">mF_tbhuabao</option>
    <option value="mF_pconline">mF_pconline</option>
    <option value="mF_peijianmall">mF_peijianmall</option>
    <option value="mF_classicHC">mF_classicHC</option>
    <option value="mF_classicHB">mF_classicHB</option>
    <option value="mF_slide3D">mF_slide3D</option>
    <option value="mF_kiki">mF_kiki</option>
    <option style="color:#f00;" value="mF_fancy" selected="selected">mF_fancy</option>
    <option style="color:#f00;" value="mF_dleung">mF_dleung</option>
    <option style="color:#f00;" value="mF_kdui">mF_kdui</option>
    <option style="color:#f00;" value="mF_shutters">mF_shutters</option>
    <option style="color:#090;" value="more">更多...</option>
</select>
    <div id="focus_box">
        <!-- 焦点图盒子 -->
        <div id="boxID">
            <!-- 载入中的Loading图片(可选) -->
            <!-- <div class="loading"><img src="img/loading.gif" alt="请稍候..."/></div> -->
            <!-- 内容列表 -->
            <div class="pic">
                <ul>
                    <li><a href="#"><img src="img/1.jpg" alt="标题1"/></a></li>
                    <li><a href="#"><img src="img/2.jpg" alt="标题2"/></a></li>
                    <li><a href="#"><img src="img/3.jpg" alt="标题3"/></a></li>
                    <li><a href="#"><img src="img/4.jpg" alt="标题4"/></a></li>
                    <li><a href="#"><img src="img/5.jpg" alt="标题5"/></a></li>
                    <!-- 你可以根据需要添加更多的列 -->
                </ul>
            </div>
        </div>
    </div>

<script>
    myFocus.set({
        id: 'boxID',
        pattern: 'mF_classicHB'
    });
    var $id=function(id){return document.getElementById(id)};
    var oriHtml=$id('focus_box').innerHTML;
    function resetHTML(){//还原
        $id('focus_box').innerHTML=oriHtml;
        var css=document.getElementsByTagName('style')[0];
        css.parentNode.removeChild(css);
    }
    function pageInit(){
        // var pattern=location.href.split('pattern=')[1];
        // if(pattern) $id('focus_pattern').value=pattern;
        myFocus.set({id:'focus',pattern:$id('focus_pattern').value});
    }
    pageInit();
    $id('focus_pattern').onchange=function(){
        if(this.value==='more'){//更多风格
            // location.href='more.html';
            console.log("there is no more patterns for now, please try another one");
            return;
        }
        resetHTML();
        myFocus.set({id:'boxID',pattern:this.value,loadIMGTimeout:0});
    }

</script>
</body>
</html>